import React, { useState } from 'react';
import { RouterChildrenList } from '../routers'
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout as AuthLayout, Menu, theme } from 'antd';
import { NavLink, Outlet } from 'react-router-dom'
const { Header, Content, Footer, Sider } = AuthLayout;
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
	label: React.ReactNode,
	key: React.Key,
	children?: MenuItem[],
): MenuItem {
	return {
		key,
		children,
		label,
	} as MenuItem;
}
const Layout: React.FC = () => {
	const [collapsed, setCollapsed] = useState(false);
	const {
		token: { colorBgContainer, borderRadiusLG },
	} = theme.useToken();
	// 渲染子路由
	const RenderLayout = (arr: any[]) => {
		let newArr = []
		arr.forEach((item) => {
			newArr.push(
				getItem(
					<NavLink to={item.path}>{item.title}</NavLink>, item.title,
				)
			)
		})
		// 返回这个新数组
		return newArr
	}
	const items = RenderLayout(RouterChildrenList)
	return (
		<AuthLayout style={{ minHeight: '100vh' }}>
			<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
				<div className="demo-logo-vertical" />
				<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
			</Sider>
			<AuthLayout>
				<Header style={{ padding: 0, background: colorBgContainer }} />
				<Content style={{ margin: '0 16px' }}>
					<Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
					<div
						style={{
							padding: 24,
							minHeight: 740,
							background: colorBgContainer,
							borderRadius: borderRadiusLG,
						}}
					>
						<Outlet />
					</div>
				</Content>
				<Footer style={{ textAlign: 'center' }}>
					Ant Design ©{new Date().getFullYear()} Created by Ant UED
				</Footer>
			</AuthLayout>
		</AuthLayout>
	);
};

export default Layout;